<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>姓名案例_插值语法实现</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		计算属性：
		1.定义：要用的属性不存在，要通过已有属性计算得来
		2.原理：底层借助了Object.defineProperty方法提供的getter和setter
		3.get函数什么时候执行?
			(1).初次读取时会执行一次
			(2).当依赖的数据发生改变时会被再次调用.
		4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
		5.备注：
			1.计算属性最终会出现在vm上,直接读取使用即可
			2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
		-->
		<div id="root">
			<input type="text" v-model="firstName" /><br />
			<input type="text" v-model="lastName" /><br />
			姓名:<span>{{fullName}}</span><br/>
			姓名:<span>{{fullName}}</span><br/>
			姓名:<span>{{fullName}}</span><br/>
			姓名:<span>{{fullName}}</span><br/>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三'
				},
				computed:{
					// 完整写法
					// fullName:{
					// 	// 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
					// 	// get的调用时机,1.初次读取时,2.所依赖的数据发生变化时
					// 	get(){
					// 		console.log('get被调用了');
					// 		console.log(this);
					// 		return this.firstName+'-'+this.lastName;
					// 	},
					// 	set(value) {
					// 		console.log(value);
					// 		const arr = value.split('-');
					// 		this.firstName = arr[0];
					// 		this.lastName = arr[1];
					// 	}
					// }
					// 简写:仅考虑get读取不考虑修改时才可以
					fullName(){
						console.log('get called.');
						return this.firstName+'-'+this.lastName;
					}
				}
			});
		</script>
	</body>
</html>